<script>
    var fadeOut = (function () {
        var flag = false;

        return function (text) {

            if(flag){
                return;
            }

            flag = true;
            var box = document.getElementById('tips');
            if(!box){
                var tips = document.createElement('div');
                tips.id = 'tips';
                tips.className = 'tips';
                document.body.appendChild(tips);
                box = tips;
            }

            box.innerHTML = '<span>'+ text +'</span>';

            setTimeout(function () {
                var span = box.getElementsByTagName('span')[0];
                span.className = 't-fadeout';
            }, 1000)

            setTimeout(function () {
                box.innerHTML = '';
                flag = false;
            }, 1500)
        }
    }());

    export default {
        main: fadeOut
    }
</script>

<style>
    .tips{
        position: fixed;
        left: 0;
        top: 45%;
        z-index: 9999;
        width: 100%;
        font-size: 1.6rem;
        line-height: 3.2rem;
        text-align: center;
    }

    .tips span{
        position: absolute;
        left: 50%;
        top: 0;
        padding: 0 15px;
        color: #fff;
        background-color: rgba(0, 0, 0, .5);
        -webkit-transform: translate3d( -50%, 0, 0);
        transform: translate3d( -50%, 0, 0);
    }

    .tips .t-fadeout{
        -webkit-transform: translate3d( -50%, -200%, 0);
        transform: translate3d( -50%, -200%, 0);
        -webkit-transition: all .5s ease 0s;
        transition: all .5s ease 0s;
        opacity: 0;
    }
</style>